<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-05 09:35:25
-->
<template>
  <div id="left1Container" style="height: 95%"></div>
</template>
<script>
// 导入图表
import { Area } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      // 1.准备数据
      const data = [
        { date: "2022-01-01", "pm2.5": 56 },
        { date: "2022-01-02", "pm2.5": 76 },
        { date: "2022-01-03", "pm2.5": 86 },
        { date: "2022-01-04", "pm2.5": 46 },
        { date: "2022-01-05", "pm2.5": 36 },
        { date: "2022-01-06", "pm2.5": 66 },
      ];
      // 2.初始化图表实例，配置配置项
      const area = new Area("left1Container", {
        data,
        xField: "date",
        yField: "pm2.5",
        xAxis: {
          range: [0, 1],
          label: {
            style: {
              fill: "white",
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fill: "white",
            },
          },
          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },
        tooltip: {
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontFamily: "微软雅黑",
            },
          },
        },
        areaStyle: () => {
          // 面积图区域渐变设置
          return {
            fill: "l(90) 0:rgba(100, 255, 0, 1) 0.5:rgba(0, 255, 255, 0.7) 1:rgba(0,0,0,0)",
            cursor: "pointer",
          };
        },
        line: {
          size: 3,
          color: "#f7c122",
        },
      });
      // 3.执行绘画渲染
      area.render();
    },
  },
  // vue实例完全挂载到页面上
  mounted() {
    this.initChart();
  },
};
</script>
<style scoped>
.sdfsdf {
  color: #7a1919;
}
</style>
